<template>
    <div class="bg-box-1">
        <div class="bg-box-1-icon">
            <img :src="box1" alt="" srcset="">
        </div>
        <div class="bg-box-1-number" style="align-items: center;">
            <span class="color">{{ number || '0' }}</span>
            <span class="unit">{{ unit || '家' }}</span>
        </div>
        <div class="bg-box-1-text">
            <span>{{ name || '' }}</span>
        </div>
    </div>
</template>
<script>
    import box1 from './images/qy.png'
    export default {
        data () {
            return {
                box1
            }
        },
        props:['number','unit','name']
    }
</script>
<style lang="scss">
    .bg-box-1 {
        width: 113.33px;
        height: 177px;
        border-radius: 5px;
        opacity: 1;

        /* 自动布局 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // padding: 24px;
        gap: 16px;
        flex-grow: 1;

        background: linear-gradient(180deg, rgba(59, 214, 172, 0.1) 0%, rgba(59, 214, 172, 0) 100%);

        z-index: 0;
        .bg-box-1-icon,.bg-box-1-number,.bg-box-1-text {
            display: flex;
            justify-content: center;
        }
        .bg-box-1-number .color {
            font-family: DIN;
            font-size: 22px;
            font-weight: bold;
            line-height: 22px;
            letter-spacing: 0em;

            background: linear-gradient(180deg, #D5FFF5 15%, #8CD9C5 84%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            z-index: 0;
        }
        .bg-box-1-number .unit {
            opacity: 0.8;
            font-family: 思源黑体;
            font-size: 14px;
            font-weight: 350;
            line-height: 14px;
            letter-spacing: 0em;

            /* 纯白 */
            color: #FFFFFF;

            z-index: 1;
            margin-left: 8px;
        }
        .bg-box-1-text span {
            opacity: 1;
            font-family: 思源黑体;
            font-size: 14px;
            font-weight: normal;
            line-height: normal;
            text-transform: uppercase;
            letter-spacing: 1px;

            font-variation-settings: "opsz" auto;
            font-feature-settings: "kern" on;
            /* 文字白 */
            color: #FFFFFF;

            z-index: 1;
        }
    }
</style>
